<template>
  <div class="w-full h-250px text-16px">
    <swiper
      :loop="true"
      class="home-swiper"
      :modules="[Navigation, Autoplay]"
      :autoplay="{ delay: 5000, disableOnInteraction: false }"
    >
      <swiper-slide v-for="(item, index) in banners" :key="index">
        <div
          class="bgSwiper pointer"
          @click="onNav(`/news/funding/index?type=${item.type === 2 ? 1 : 2}&id=${item.id}`)"
        >
          <div
            class="absolute left-20px top-20px bg-[#cbff36] p-10px max-w-60vw z-99 rounded-5px one-row-ellipsis"
          >
            {{ item.mainCategoryName }}
          </div>
          <div
            class="absolute left-20px bottom-20px text-white p-10px z-99 rounded-5px text-16px font-bold"
          >
            {{ item.title }}
          </div>
          <el-image :src="item.imgUrl" :fit="'fill'" class="h-250px w-full" />
        </div>
      </swiper-slide>
    </swiper>
  </div>
  <div class="py-20px px-10px w-full text-16px">
    <div class="w-full flex justify-between">
      <h2 class="font-bold text-[20px] text-primary mb-20px">新产品</h2>
      <a href="javascript:;" @click.prevent="onNav('/news/flist')" class="text-14px">查看更多</a>
    </div>
    <div class="w-full grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-16px">
      <div
        class="bg-white w-45vw max-w-175px mb-10px px-8px py-10px flex flex-col shadow-box rounded-4px"
        v-for="item in productList"
        :key="item.id"
        @click="onNav(`/news/funding/index?type=2&id=${item.id}`)"
      >
        <el-image
          :src="item.imgUrl"
          class="w-full max-w-165px aspect-square rounded-3px mb-10px"
          :fit="'cover'"
        />
        <div class="h-32px text-16px line-clamp-2">{{ item.title }}</div>
        <div class="mt-10px w-full">
          <el-progress :percentage="(item.subscribeAmount / item.targetAmount).toFixed(2)" />
        </div>
        <div class="mt-10px w-full text-14px">已认缴:￥{{ item.subscribeAmount }}</div>
        <span class="text-12px mt-10px">{{ item.mainCategoryName }}</span>
      </div>
    </div>
  </div>
  <div class="py-20px px-10px bg-white w-full text-16px">
    <div class="w-full flex justify-between">
      <h2 class="font-bold text-[20px] text-primary mb-20px">新研究</h2>
      <a href="javascript:;" @click.prevent="onNav('/news/list')" class="text-14px">查看更多</a>
    </div>
    <div class="w-full grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-16px">
      <div
        class="bg-white w-45vw max-w-175px mb-10px px-5px py-10px flex flex-col border rounded-3px"
        v-for="item in paperList"
        :key="item.id"
        @click="onNav(`/news/funding/index?type=1&id=${item.id}`)"
      >
        <el-image
          :src="item.imgUrl"
          class="w-full max-w-165px aspect-square rounded-3px mb-10px"
          :fit="'cover'"
        />
        <div class="h-32px text-16px line-clamp-2">{{ item.title }}</div>
        <span class="text-12px mt-20px">{{ item.mainCategoryName }}</span>
      </div>
    </div>
  </div>
  <div class="py-20px px-10px w-full text-16px">
    <div class="w-full flex justify-between">
      <h2 class="font-bold text-[20px] text-primary mb-20px">阿米巴</h2>
      <a href="javascript:;" class="text-14px">查看更多</a>
    </div>
    <div class="w-full grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-16px">
      <div
        class="bg-white w-45vw max-w-175px mb-10px px-8px py-10px flex flex-col shadow-box rounded-4px"
        v-for="item in productList"
        :key="item.id"
      >
        <el-image
          :src="item.imgUrl"
          class="w-full max-w-165px aspect-square rounded-3px mb-10px"
          :fit="'cover'"
        />
        <div class="h-32px text-16px line-clamp-2">{{ item.title }}</div>
        <div class="mt-10px w-full text-14px text-primary mb-10px">￥25 起</div>

        <div class="h-32px text-16px line-clamp-2">{{ item.mainCategoryName }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onActivated, ref } from 'vue'
import 'swiper/css'
import 'swiper/css/autoplay'
import 'swiper/css/navigation'
import { Autoplay, Navigation } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import {
  getHomeBannerRecommend,
  getHomeFundingRecommend,
  getHomeArticleRecommend,
} from '@/api/funding'
const banners = ref([])
const productList = ref([])
const paperList = ref([])

const init = () => {
  getHomeBannerRecommend({
    current: 1,
    size: 7,
  }).then((res) => {
    if (res.code === 20000) {
      banners.value = res.data.records
    }
  })
  getHomeFundingRecommend({
    current: 1,
    size: 8,
  }).then((res) => {
    if (res.code === 20000) {
      productList.value = res.data.records
    }
  })
  getHomeArticleRecommend({
    current: 1,
    size: 8,
  }).then((res) => {
    if (res.code === 20000) {
      paperList.value = res.data.records
    }
  })
}

const onNav = (path) => {
  window.open(window.location.href + path, '_blank')
}

init()

onActivated(() => {
  init()
})
</script>
